<template>
	<view>
		<template v-if="openType">
			<view class="confirmBox" v-show="confShow">
				<view class="mask" @click="cancel"></view>
				<view class="content">
					<view class="title">{{title}}</view>
					<slot name="messageSlot">
						<view v-if="message" class="text">{{ message }}</view>
						<view class="message-list" v-if="messageList.length">
							<view class="message" v-for="(item, index) in messageList">{{index + 1}}.{{item}}</view>
						</view>
					</slot>
					<view class="tipsMsg" v-if="tipsMsg!=''">{{ tipsMsg }}</view>
					<view class="btnWrap">
						<view class="btnCenter flex ac" v-if="btnNumber == 1">
							<view class="btn on" data-ui="0"  @click="confirm">{{ confirmBtMsg }}</view>
						</view>
						<view class="btnCenter flex ac" v-else>
							<view class="btn" data-ui="0" @click="cancelBtn">{{ cancelBtMsg }}</view>
							<view class="line"></view>
							<button class="btn on" @click="confirm" v-if="openType == 'none'">{{ confirmBtMsg }}</button>
							<button class="btn on" v-else :open-type="openType" data-ui="0" @getphonenumber="confirm">{{ confirmBtMsg }}</button>
						</view>
					</view>
				</view>
			</view>
		</template>
		<template v-else>
			<cover-view class="confirmBox" v-show="confShow">
				<cover-view class="mask" @click="cancel"></cover-view>
				<cover-view class="content">
					<cover-view class="title">{{title}}</cover-view>
					<slot name="messageSlot">
						<cover-view 
						v-if="message" 
						class="text" 
						<!-- #ifdef H5 -->
						v-html="message"
						<!-- #endif -->
						>
						<!-- #ifdef MP-WEIXIN -->
						{{message}}
						<!-- #endif -->
						</cover-view>
						<cover-view class="message-list" v-if="messageList.length">
							<cover-view class="message" v-for="(item, index) in messageList">{{index + 1}}.{{item}}</cover-view>
						</cover-view>
					</slot>

					<cover-view class="tipsMsg" v-if="tipsMsg!=''">{{ tipsMsg }}</cover-view>
					<cover-view class="btnWrap">
						<cover-view class="btnCenter flex ac" v-if="btnNumber == 1">
							<cover-view class="btn on" data-ui="0"  @click="confirm">{{ confirmBtMsg }}</cover-view>
						</cover-view>
						<cover-view class="btnCenter flex ac" v-else>
							<cover-view class="btn" data-ui="0" @click="cancelBtn">{{ cancelBtMsg }}</cover-view>
							<cover-view class="line"></cover-view>
							<cover-view class="btn on" data-ui="0" @click="confirm">{{ confirmBtMsg }}</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</cover-view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
		props: {
			title: {
				type: String,
				default: ''
			},
			messageList: {
				type: Array,
				default: () => []
			},
			message: {
				type: String,
				default: ''
			},
			confShow: {
				type: Boolean,
				default: false
			},
			confirmBtMsg: {
				type: String,
				default: '确认'
			},
			cancelBtMsg: {
				type: String,
				default: '取消'
			},
			tipsMsg:{
				type: String,
				default: ''
			},
			btnNumber:{
				type: [String,Number],
				default: 2
			},
			openType: String,
			cancelBtnFn:{
				type: String,
				default: ''
			}
		},
		methods: {
			confirm(e) {
				this.$emit('confirm', e);
			},
			cancel() {
				this.$emit('cancel');
			},
			cancelBtn(){
				if(this.cancelBtnFn != ''){
					this.$emit(this.cancelBtnFn);
				}else{
					this.$emit('cancel');
				}
			}
		}
	};
</script>

<style lang="scss">
	.confirmBox {
		position: fixed;
		z-index: 99999;
		left: 0;
		top:0;
		bottom: 0;
		width: 100%;
		.mask {
			position: fixed;
			background: rgba(0, 0, 0, 0.6);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}

		.content {
			position: fixed;
			background: #fff;
			width: 560rpx;
			// height: 276rpx;
			// border-radius: 16rpx;
			border-radius: 12rpx;
			//padding: 48rpx 44rpx 32rpx;
			top: 50%;
			left: 50%;
			transform: translateY(-50%);
			margin-left: -280rpx;
			color: #716d80;

			.title {
				padding: 0 44rpx;
				padding-top: 48rpx;
				text-align: center;
				color:#333;
				font-size: 32rpx;
				font-weight: 600;
				color: rgba(113, 109, 128, 1);
				margin-bottom: 16rpx;
			}

			.text {
				padding: 0 44rpx;
				text-align: center;
				font-size: 28rpx;
				white-space: normal;
			}

			.message-list{
				padding: 0 44rpx;
				box-sizing: border-box;
				.message{
					white-space: normal;
					font-size: 28rpx;
					color: #666666;
					margin-bottom: 35rpx;
				}
			}

            .tipsMsg{
				margin-top: 30rpx;
				padding: 2rpx;
				color: #a09cb4;
				text-align: center;
				font-size: 24rpx;
				white-space: normal;
			}

			.btnWrap {
				// padding-bottom: 32rpx;
				margin-top: 40rpx;
				overflow: hidden;
				text-align: center;

				.btnCenter {
					// display: inline-block;
                    border-top: 1px solid #EAEAEA;
					.btn {
						font-size: 32rpx;
						// width: 200rpx;
						height: 94rpx;
						text-align: center;
						line-height:94rpx;
						// margin-right: 12rpx;
						// float: left;
						// border: 1px solid #EAEAEA;
						// border-radius: 6rpx;
						flex: 1;

						&.on {
							// background: #ff004f;
							color: #FF004F;
							// border-color: #ff004f;
						}

						&:last-child {
							margin-right: 0;
						}
					}
					.line{
						height: 94rpx;
						width: 1px;
						background-color: #EAEAEA;
					}
				}
			}
		}
	}
</style>
